var WorkProcedure = function () {
  var template = /*html*/ `
    <div class="work-procedure" v-loading.fullscreen.lock="loading">
      <div v-if="workPros.length===0" class="no-data">
        没有物料进度数据
      </div>
      <div v-else class="work-procedure-content">
        <div style="color:#ff0000;font-size:18px;margin-bottom:10px">表格里内容颜色为红色代表物料已更换</div>
        <div v-for="(workPro,index) in workPros" :key="'workPros_'+index" class="work-procedure-table">
          <table cellspacing="0" cellpadding="0">
            <thead>
              <tr @click="changeExpand(workPro)" style="cursor:pointer;">
                <template v-for="(tableHead,headIndex) in workPro.tableHeads">
                  <th colspan="4" :key="'wsName_'+headIndex">
                    {{getTableTitle(workPro,tableHead)}}
                  </th>
                </template>
              </tr>
              <tr>
                <template v-for="(tableHead,headIndex) in workPro.tableHeads">
                  <th :key="'process_'+headIndex">工序名称</th>
                  <th :key="'qualified_'+headIndex">合格数</th>
                  <th :key="'noQualified_'+headIndex">不合格数</th>
                  <th :key="'touchTime_'+headIndex">制单时间</th>
                </template>
              </tr>
            </thead>
            <tbody>
              <template v-if="workPro.expand">
                <tr v-for="(pro,dataIndex) in workPro.proList" :key="'row_'+dataIndex">
                  <template v-for="(tableHead,headIndex) in workPro.tableHeads">
                    <td :key="'process_'+dataIndex+'_'+headIndex" :class="getProClassName(pro[tableHead.machining])">
                      <span v-if="pro[tableHead.machining]!==undefined">
                        {{getProcessName(pro[tableHead.machining])}}
                      </span>
                    </td>
                    <td :key="'qualified_'+dataIndex+'_'+headIndex" :class="getProClassName(pro[tableHead.machining])">
                      <span v-if="pro[tableHead.machining]!==undefined">
                        {{pro[tableHead.machining].qualified}}
                      </span>
                    </td>
                    <td :key="'noQualified_'+dataIndex+'_'+headIndex" :class="getProClassName(pro[tableHead.machining])">
                      <span v-if="pro[tableHead.machining]!==undefined">
                        {{pro[tableHead.machining].noQualified}}
                      </span>
                    </td>
                    <td :key="'touchTime_'+dataIndex+'_'+headIndex" :class="getProClassName(pro[tableHead.machining])">
                      <span v-if="pro[tableHead.machining]!==undefined">
                        {{pro[tableHead.machining].touchTime}}
                      </span>
                    </td>
                  </template>
                </tr>
              </template>
              <template v-else>
                <tr>
                  <template v-for="(tableHead,headIndex) in workPro.tableHeads">
                  <td :key="'process_'+headIndex" :class="getProClassName(workPro.lastProObj[tableHead.machining])">
                    <span v-if="workPro.lastProObj[tableHead.machining]!==null">
                      {{getProcessName(workPro.lastProObj[tableHead.machining])}}
                    </span>
                  </td>
                  <td :key="'qualified_'+headIndex" :class="getProClassName(workPro.lastProObj[tableHead.machining])">
                    <span v-if="workPro.lastProObj[tableHead.machining]!==null">
                      {{workPro.lastProObj[tableHead.machining].qualified}}
                    </span>
                  </td>
                  <td :key="'noQualified_'+headIndex" :class="getProClassName(workPro.lastProObj[tableHead.machining])">
                    <span v-if="workPro.lastProObj[tableHead.machining]!==null">
                      {{workPro.lastProObj[tableHead.machining].noQualified}}
                    </span>
                  </td>
                  <td :key="'touchTime_'+headIndex" :class="getProClassName(workPro.lastProObj[tableHead.machining])">
                    <span v-if="workPro.lastProObj[tableHead.machining]!==null">
                      {{workPro.lastProObj[tableHead.machining].touchTime}}
                    </span>
                  </td>
                  </template>
                </tr>
              </template>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  `;

  return {
    props: {
      order: {
        type: Object,
        required: true
      }
    },
    data: function () {
      return {
        loading: false,
        workPros: []
      };
    },
    created: function () {
      this.setWorkPro();
    },
    methods: {
      setWorkPro: function () {
        var order = this.order;
        var self = this;
        this.loading = true;
        ajaxRequest('order/getOrderMaterialReport', {
          orderId: order.orderId
        }).then(function (proList) {
          proList = _.map(proList, function (pro) {
            var rowIndex = pro.rowIndex;
            rowIndex = Number(rowIndex);
            if (rowIndex === -1) {
              rowIndex = 1;
            }

            var color = pro.color;
            if (color === null) {
              color = '';
            }

            var model = pro.model;
            if (model === null) {
              model = '';
            }
            return {
              rowIndex: rowIndex,
              type:pro.type,
              workShopName: pro.workShopName,
              machining: pro.machining,
              procedur: pro.procedur,
              qualified: pro.qualified,
              noQualified: pro.noQualified,
              touchTime: pro.touchTime,
              relationSource: pro.relationSource,
              color: color.trim(),
              model: model.trim(),
              additionalColor:pro.additionalColor
            };
          });

          var proGroup = _.groupBy(proList, 'rowIndex');
          var workPros = [];
          for (var key in proGroup) {
            var data = proGroup[key];
            var option = self.getWorkShopPro(data);
            var tableHeads = option.tableHeads;
            var workPro = {
              rowIndex: key,
              tableHeads: tableHeads,
              proList: option.proList,
              expand: false
            };
            var lastProObj = {};
            for (var i = 0; i < tableHeads.length; i++) {
              var tableHead = tableHeads[i];
              var lastPro = self.getLastPro(workPro, tableHead);
              lastProObj[tableHead.machining] = lastPro;
            }
            workPro.lastProObj = lastProObj;
            workPros.push(workPro);
          }
          self.workPros = workPros;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },
      getWorkShopPro: function (pros) {
        var proList = [];
        var tableHeads = [];
        for (var i = 0; i < pros.length; i++) {
          var data = pros[i];
          var machining = data.machining;

          var index = _.findLastIndex(proList, machining);
          index++;
          var obj = proList[index];
          if (obj === undefined) {
            obj = {};
            proList.push(obj);
          }
          obj[machining] = data;

          var tableHead = _.find(tableHeads, {
            machining: machining
          });
          if (tableHead === undefined) {
            tableHead = {
              machining: machining
            };
            tableHeads.push(tableHead);
          }

          var color = data.color;
          if (color !== '') {
            if (tableHead.color === undefined) {
              tableHead.color = color;
            }
          }

          var model = data.model;
          if (model !== '') {
            if (tableHead.model === undefined) {
              tableHead.model = model;
            }
          }
        }
        return {
          tableHeads: tableHeads,
          proList: proList
        };
      },
      getLastPro: function (workPro, tableHead) {
        var proList = workPro.proList;
        var field = tableHead.machining;
        var pro = _.findLast(proList, function (obj) {
          return obj[field] !== undefined;
        });
        if (pro === undefined) {
          return null;
        }
        return pro[field];
      },
      changeExpand: function (workPro) {
        workPro.expand = !workPro.expand;
      },
      getTableTitle: function (workPro, tableHead) {
        var titleList = [workPro.rowIndex, tableHead.machining];
        var color = tableHead.color;
        if (color !== undefined) {
          titleList.push(color);
        }

        var model = tableHead.model;
        if (model !== undefined) {
          titleList.push(model);
        }

        return titleList.join('-');
      },
      getProcessName: function (workPro) {
        var names = [workPro.workShopName, workPro.procedur];
        var relationSource = workPro.relationSource;
        if (!SysUtil.isEmpty(relationSource)) {
          names.push(relationSource);
        }

        var additionalColor = workPro.additionalColor;
        if (!SysUtil.isEmpty(additionalColor)) {
          names.push(additionalColor);
        }

        return names.join('-');
      },

      getProClassName:function(pro){
        if (pro === undefined) {
          return '';
        }

        if (pro.type === 2) {
          return 'material-changed';
        }
        return '';
      }
    },
    template: template
  };
}();